<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import {EyeOutlined, FireOutlined, ManOutlined,WomanOutlined,PlusOutlined} from '@ant-design/icons-vue'
import {changeStr} from "@/config";

const {width, height, name, snapshot} = defineProps<{
  width?:string|number,
  height?:string|number,
  // 姓名
  name?:string,
  // 简介
  snapshot?:string,
  // 头像
  cover?:string
  // 主题颜色
  color?:string
}>()
// 方法
const emit = defineEmits(['attention','mail'])
const handleAttentionClick = () => {
  emit('attention')
}
const handleMailClick = () => {
  emit('mail')
}
</script>

<template>
  <div class="card-auther" :style="{width:changeStr(width),height: changeStr(height)}">
    <button class="mail" @click="handleMailClick">
      <svg
          class="lucide lucide-mail"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
      >
        <rect rx="2" y="4" x="2" height="16" width="20"></rect>
        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
      </svg>
    </button>
    <div class="profile-pic" :style="{
      backgroundImage:`url('${cover}')` || '#fff',
      border: `0 solid ${color}`
      }"></div>
    <div class="bottom" :style="{backgroundColor: color || '#fbb9b6'}">
      <div class="content-c">
        <span class="name">{{name || '木的昵称' }}</span>
        <span class="about-me">{{snapshot || '简介...'}}</span>
      </div>
      <div class="bottom-bottom">
        <div class="social-links-container">
          <EyeOutlined class="icon-a"/>
          <FireOutlined class="icon-a"/>
          <ManOutlined class="icon-a"/>
<!--          <WomanOutlined class="icon-a"/>-->
        </div>
        <button class="button" @click="handleAttentionClick">
          <PlusOutlined />
          关 注
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.icon-a{
  color: #fff;
  font-size: 18px;
  transform: scale(0.95);
  &:hover{
    color: #f55d56;
  }
}

.card-auther {
  width: 280px;
  height: 280px;
  background: white;
  border-radius: 32px;
  padding: 3px;
  position: relative;
  //box-shadow: #604b4a30 0 70px 30px -50px;
  transition: all 0.5s ease-in-out;
}

.card-auther .mail {
  position: absolute;
  right: 2rem;
  top: 1.4rem;
  background: transparent;
  border: none;
  svg{
    stroke: #fbb9b6;
    stroke-width: 3px;
    &:hover{
      stroke: #f55d56;
    }
  }
}

.card-auther .profile-pic {
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  top: 3px;
  left: 3px;
  border-radius: 29px;
  background-size: 100% 100%;
  background-position: center center;
  z-index: 1;
  border: 0 solid #fbb9b6;
  overflow: hidden;
  transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;
  img{
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    -o-object-position: 0 0;
    object-position: 0 0;
    transition: all 0.5s ease-in-out 0s;
  }
  svg{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0 0;
    object-position: 0 0;
    transform-origin: 45% 20%;
    transition: all 0.5s ease-in-out 0s;
  }
}

.card-auther .bottom {
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  background: #fbb9b6;
  top: 80%;
  border-radius: 29px;
  z-index: 2;
  box-shadow: rgba(96, 75, 74, 0.1882352941) 0 5px 5px 0 inset;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  .content-c{
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 160px;
    .name{
      display: block;
      font-size: 1.2rem;
      color: white;
      font-weight: bold;
    }
    .about-me{
      display: block;
      font-size: 0.9rem;
      color: white;
      margin-top: 1rem;
    }
  }
}

.card-auther .bottom .bottom-bottom {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .social-links-container{
    display: flex;
    gap: 1rem;
    svg{
      height: 20px;
      fill: white;
      filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333));
      &:hover{
        fill: #f55d56;
        transform: scale(1.2);
      }
    }
  }
}

.card-auther .bottom .bottom-bottom .button {
  background: white;
  color: #fbb9b6;
  border: none;
  border-radius: 20px;
  font-size: 0.6rem;
  padding: 0.4rem 0.6rem;
  box-shadow: rgba(165, 132, 130, 0.1333333333) 0 5px 5px 0;
  &:active{
    transform: scale(0.95);
    background-color: rgba(245, 93, 86,0.9);
  }
}

.card-auther .bottom .bottom-bottom .button:hover {
  background: #f55d56;
  color: white;
}

.card-auther:hover {
  border-top-left-radius: 55px;
}

.card-auther:hover .bottom {
  top: 20%;
  border-radius: 80px 29px 29px 29px;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}

.card-auther:hover .profile-pic {
  width: 100px;
  height: 100px;
  aspect-ratio: 1;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  z-index: 3;
  border: 7px solid #fbb9b6;
  box-shadow: rgba(96, 75, 74, 0.1882352941) 0 5px 5px 0;
  transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;
}

.card-auther:hover .profile-pic:hover {
  transform: scale(1.2);
  border-radius: 0;
}

.card-auther:hover .profile-pic img {
  transform: scale(2.5);
  -o-object-position: 0 25px;
  object-position: 0 25px;
  transition: all 0.5s ease-in-out 0.5s;
}

.card-auther:hover .profile-pic svg {
  transform: scale(2.5);
  transition: all 0.5s ease-in-out 0.5s;
}
</style>